<script setup lang="ts">
import {useMenuViewStore} from "@/store/views/sys/admin/menuStore";
import {FormInstance, FormRules} from "element-plus";
import {MenuVo, MenuVoRules} from "@/api/sys/admin/menu/types";
import {editMenuApi} from "@/api/sys/admin/menu";
import {storeToRefs} from "pinia";
import {Perm, TableActionEnum} from "@/utils/enum-type";
import {commonFormat} from "@/utils/format-table";

const store = useMenuViewStore()
const {setEditVisible, getList, title} = store
const {editVisible, editForm, treeSelectData, menuTypeOptions} = storeToRefs(store)


// 编辑表单时规则验证
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const rules: FormRules<MenuVoRules> = ref({
  name: [{required: true, message: '请输入菜单名', trigger: 'blur'}],
  type: [{required: true, message: '请选择菜单类型', trigger: 'blur'}],
})
const tableTitle = TableActionEnum.edit + title

// 点击树时候的类型
const treeType = ref(2)


function closeDialog() {
  console.log('关闭')
  treeType.value = 2
}

// 提交编辑
function submitEdit(formEl: FormInstance | undefined) {
  if (!formEl) {
    return;
  }
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('提交的数据为:', editForm)
      editMenuApi(editForm.value.id!, editForm.value).then(async () => {
        loading.value = true
        await getList()
        ElMessage.success('编辑成功')
        setEditVisible(false)
      }).finally(() => {
        loading.value = false
      })
    } else {
      console.log('错误的字段', fields)
    }
  })
}

watchEffect(() => {
  const {type} = editForm.value
  rules.path = []
  rules.component = []
  rules.perm = []
  if ([1].includes(type)) {
    rules.path = [{required: true, message: '请输入路由路径', trigger: 'blur'}]
    rules.component = [{required: true, message: '请输入页面路径', trigger: 'blur'}]
  } else if ([2].includes(type)) {
    rules.path = [{required: true, message: '请输入路由路径', trigger: 'blur'}]
    rules.component = []
  } else if ([3].includes(type)) {
    rules.perm = [{required: true, message: '请输入权限标识', trigger: 'blur'}]
  } else if ([4].includes(type)) {
    rules.path = [{required: true, message: '请输入路由路径', trigger: 'blur'}]
  }
})
// 当前选中的类型
const type = computed(() => editForm.value.type)

function clearTree() {
  treeType.value = 2
}

/**
 * 可以更改parentId的话(菜单类型(1:菜单；2:目录；3:按钮；4:外链))
 * 如果是[1,2,4],可以改到2-目录下面
 * 如果是[3]-按钮,可以改到1-菜单下面
 *
 */
</script>

<template>
  <!-- 弹出框 :编辑-->
  <el-dialog draggable v-model="editVisible" :title="tableTitle" width="720" destroy-on-close @close="closeDialog">
    <el-form :model="editForm" label-suffix=":" label-width="100" ref="ruleFormRef" :rules="rules">
      <el-form-item label="父级菜单" prop="parentId">
        <el-tree-select
            v-model="editForm.parent.id"
            :data="treeSelectData"
            :props="{label:'name'}"
            node-key="id"
            check-strictly
            :render-after-expand="false"
            clearable
            placeholder="不选就是顶级菜单"
            @clear="clearTree"
        >
          <template #default="{data}">
            <el-text>{{ data.name }}</el-text>
            <x-tag class="ml-8 scale-90" :value="data.type" :options="menuTypeOptions" effect="plain"></x-tag>
          </template>
        </el-tree-select>
        <x-tag size="default" class="m-l-12" :value="treeType" :options="menuTypeOptions"></x-tag>
      </el-form-item>
      <el-form-item label="菜单名" prop="name">
        <el-input v-model="editForm.name" clearable placeholder="角色管理"/>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <x-dict-select type-code="menu_type" v-model="editForm.type" disabled/>
      </el-form-item>
      <el-form-item label="图标" v-if="[1,2,4].includes(type)">
        <x-icon-select v-model="editForm.icon"/>
        <el-button circle size="small" class="ml-4" @click="editForm.icon = ''">
          <x-icon name="close"/>
        </el-button>
      </el-form-item>
      <el-form-item label="路由路径" prop="path" v-if="[1,2].includes(type)">
        <el-input v-model="editForm.path" clearable placeholder="user"/>
      </el-form-item>
      <el-form-item label="外链地址" prop="path" v-else-if="[4].includes(type)">
        <el-input v-model="editForm.path" clearable placeholder="https://www.xxx.com"/>
      </el-form-item>
      <el-form-item label="跳转路由" v-if="[2].includes(type)">
        <el-input v-model="editForm.redirect" clearable placeholder="/system/user"/>
      </el-form-item>
      <el-form-item label="页面路径" prop="component" v-if="[1].includes(type)">
        <el-input v-model="editForm.component" clearable placeholder="system/user/index">
          <template #prepend>src/view/sys/</template>
          <template #append>.vue</template>
        </el-input>
      </el-form-item>
      <el-form-item label="权限标识" v-if="[3].includes(type)" prop="perm">
        <el-input v-model="editForm.perm" clearable placeholder="sys:user:edit"/>
      </el-form-item>
      <el-form-item v-perm="Perm.SysMenuStatus" label="状态" prop="status">
        <x-dict-select type-code="status" v-model="editForm.status"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="editForm.sort" placeholder="序号越小越靠前"/>
      </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-input type="textarea" autosize v-model="editForm.remark"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="setEditVisible(false)">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitEdit(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>